<template>
    <div class="document-left">
        <div class="document-left-show" :class="[catalogueType == false?'showTwo':'hiddenTwo']" @click="loadCatalogueShow">
            <span class="document-left-show-title">模</span>
            <span class="document-left-show-title">版</span>
        </div>
        <div class="menu-handle-bar">
            <div v-if="catalogueType == true" class="menu-handel-bar-itembox" @click="loadCatalogueHidden">
                <i class="menu-handel-bar-itembox-icon el-icon-arrow-left"></i>
            </div>
        </div>
        <div class="document-left-content" :class="[catalogueType == true?'show':'hidden']">
            <div class="document-left-tree">
                <el-tree :data="treeData" node-key="id" :props="props" lazy :load="loadNode" :default-expanded-keys="['']" :expand-on-click-node="false">
                    <span class="custom-tree-node" slot-scope="{ node, data }" @click="dataclick(data)">
                        <img v-if="data.src" class="svg-icon" :src="data.src" />
                        <img v-else class="svg-icon" :src="node.expanded?flatFileIcon:folderIcon" />
                        <el-tooltip class="item" effect="dark" :content="data.label" placement="left">
                            <span class="document-left-tree-span">{{ data.label }}</span>
                        </el-tooltip>
                        <div class="document-left-tree-iconBox">
                            <el-popover placement="bottom" trigger="hover">
                                <div class="popover-content">
                                    <div class="popover-content-bottom">
                                        <span class="popover-content-top-title" v-if="data.id==''" @click="loadFolder(data)">新建模板</span>
                                        <span class="popover-content-top-title" v-if="data.id" @click="delFolder(data)">删除模板</span>
                                        <span class="popover-content-top-title" v-if="data.id" @click="editFolder(data)">修改模板</span>
                                    </div>

                                </div>
                                <i slot="reference" class="document-left-tree-more el-icon-more"></i>
                            </el-popover>
                        </div>
                    </span>
                </el-tree>
            </div>
        </div>
        <folder ref="folder" @dirgetTreeDataclick='dirgetTreeDataclick'></folder>
        <editfolder ref="editfolder" @dirgetTreeDataclick='dirgetTreeDataclick' ></editfolder>
    </div>
</template>

<script>
// import popover from './popover.vue'
import folder from './folder';
import editfolder from './editfolder';
import { getTreeData, del } from "@/api/dir";
export default {
    data() {
        return {
            props: {
                label: "label",
                children: [],
                isLeaf: "isLeaf",
            },
            current: 1,
            size: 20,
            total: 0,
            functionIndex: -1,
            treeData: [],
            catalogueType: true,
            folderIcon: require("../../../img/8eacfb1a6bafde0a172c6b393950dab8.svg"),
            flatFileIcon:require("../../../img/53291f9df1685d566be7cc967d80d249.svg"),
            cataloguesrc:require("../../../img/0aa34d50b616e6482cfb8ea7cf251d5b.svg"),
        };
    },
    components: {
        editfolder,
        folder
    },
    created() {
        this.dirgetTreeDataclick();
    },
    methods: {
        loadNode(node, resolve) {
            console.log("1111");
            console.log(node);
            // 一级节点处理
            if (node.level === 0) {
                // this.requestTree(resolve)
            }
            // 其余节点处理
            if (node.level >= 1) {
                // 注意！把resolve传到你自己的异步中去
                if (node.data.data.dirLevel == -1) {
                    getTreeData(
                        { parentId: node.data.data.dirId, dirType: "11" },
                        false
                    ).then((res) => {
                        const { data } = res;
                        resolve(data.data);
                    });
                } else {
                    // 	let level=Number(node.data.data.dirLevel)+1
                    // 	   getTreeData({level: level,parentId:node.data.data.dirId,dirType:'11'},false).then(res => {
                    // 	const {
                    // 		data
                    // 	} = res
                    // 	resolve(data.data)
                    // })
                }
            }
        },
        clear() {
            this.functionIndex = -1;
        },
        // 创建根目录
        fatherdir() {
            this.$refs.folder.loadFolder();
        },
        editFolder(data){
            this.$refs.editfolder.childrenFolder(data);
        },
        delFolder(data) {
            const params = new URLSearchParams();
            params.append("ids", data.id);
            this.$confirm("确认删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                del(params).then((res) => {
                    this.$message("删除成功!");
                    this.dirgetTreeDataclick();
                    this.$emit('delectclick')
                });
            });
        },
        loadFolder(data) {
            this.$refs.folder.childrenFolder(data);
        },
        dataclick(data) {
            this.$emit('filtercatalogue',data.id)
        },
        dirgetTreeDataclick() {
            let params = new URLSearchParams();
            params.append("current", this.current);
            params.append("size", this.size);
            params.append("dirType", "11");
            getTreeData(params, false).then((res) => {
                this.treeData = res.data.data;
                res.data.data.forEach((item) => {
                    this.$set(item, "src", this.cataloguesrc);
                });
                let element = [
                    {
                        data: { children: res.data.data, dirLevel: -1 },
                        label: "全部",
                        id: "",
                        src: this.cataloguesrc,
                    },
                ];
                this.treeData = element;
                console.log("9999999999999999999999999999999999999999");
                console.log(this.treeData);
            });
        },
        loadFunction(item, index) {
            var _this = this;
            if (_this.functionIndex == index) {
                _this.functionIndex = -1;
                // this.$emit('leftstatus','')
            } else {
                _this.functionIndex = index;
                // this.$emit('leftstatus',item.value)
            }
        },
        loadCatalogueShow() {
            this.catalogueType = true;
        },
        loadCatalogueHidden() {
            this.catalogueType = false;
        },
    },
};
</script>

<style scoped>
.document-left {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    flex: 0 0 auto;
    position: relative;
    height: calc(100vh - 84px);
}

.document-left-content {
    /* overflow: hidden; */
}

.show {
    width: 232px;
    transition: all 0.5s;
    overflow-y: auto;
    overflow-x: hidden;
}

.hidden {
    width: 30px;
    transition: all 0.5s;
    overflow: hidden;
}

.document-left-function {
    padding: 24px;
    border-bottom: 1px solid #dadee3;
    width: 232px;
    box-sizing: border-box;
}

.document-left-function-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
    color: #5f6d84;
}

.document-left-function-item-icon {
    font-size: 16px;
    color: #c1c7d0;
    margin-right: 12px;
}

.document-left-function-item-title {
    font-size: 14px;
    cursor: pointer;
}

.document-left-function-item:hover {
    color: #2c7ef8;
}

.choose-color {
    color: #2c7ef8;
}

.menu-handle-bar {
    position: absolute;
    top: 0px;
    right: -10px;
    width: 10px;
    height: calc(100vh - 84px);
    background-color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-left: 1px solid #dadee3;
}

.menu-handel-bar-itembox {
    width: 12px;
    height: 56px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-handle-bar:hover > .menu-handel-bar-itembox {
    background-color: #2c7ef8;
}

.menu-handel-bar-itembox-icon {
    font-size: 12px;
    color: white;
}

.document-left-tree {
    padding: 20px;
    position: relative;
    width: 232px;
    overflow: hidden;
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    /* padding-right:20px; */
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-tree-node:hover {
    color: #909baa;
    padding-right: 22px;
}

.svg-icon {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    flex-shrink: 0;
}

.document-left-tree-span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #5f6d84;
    font-size: 14px;
}

.document-left-tree-more {
    font-size: 12px;
}

.document-left-tree-iconBox {
    position: absolute;
    right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.document-left-show {
    width: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: white;
    z-index: 99;
}
.document-left-show-title {
    font-size: 12px;
    color: #909aaa;
    margin-top: 10px;
}

.showTwo {
    opacity: 1;
    transition: all 0.5s;
}

.hiddenTwo {
    opacity: 0;
    transition: all 0.5s;
}
.popover-content-bottom {
    padding-top: 10px;
}
.popover-content-top-title {
    color: #2e405e;
    font-size: 14px;
    display: block;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
}
.popover-content-top-title:hover {
    background-color: #f5f6f8;
    color: #2e405e;
    font-size: 14px;
    display: block;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
}
</style>
